<keira-top-bar [selected]="handlerService.selected" [selectedName]="handlerService.selectedName" [isNew]="handlerService.isNew" />

<div class="container-fluid">
  @if (editorService.loading) {
    <span [translate]="'LOADING'"></span>
  }

  @if (editorService.form && !!editorService.loadedEntityId && !editorService.loading) {
    <div>
      <div class="content-block">
        <keira-query-output
          [docUrl]="docUrl"
          [isNew]="editorService.isNew"
          [diffQuery]="editorService.diffQuery"
          [fullQuery]="editorService.fullQuery"
          [error]="editorService.error"
          [entityTable]="editorService.entityTable"
          [editorService]="editorService"
          (executeQuery)="save($event)"
        />
      </div>
      <form [formGroup]="editorService.form" class="form-group edit-form">
        <div class="content-block">
          <div class="row">
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
              <label class="control-label" for="entry">entry</label>
              <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'CREATURE.TEMPLATE_ADDON.ENTRY' | translate"></i>
              <input [formControlName]="'entry'" id="entry" type="number" class="form-control form-control-sm" />
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
              <label class="control-label" for="path_id">path_id</label>
              <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'CREATURE.TEMPLATE_ADDON.PATH_ID' | translate"></i>
              <input [formControlName]="'path_id'" id="path_id" type="number" class="form-control form-control-sm" />
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
              <label class="control-label" for="mount">mount</label>
              <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'CREATURE.TEMPLATE_ADDON.MOUNT' | translate"></i>
              <input [formControlName]="'mount'" id="mount" type="number" class="form-control form-control-sm" />
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
              <label class="control-label" for="bytes1">bytes1</label>
              <keira-single-value-selector-btn
                [control]="editorService.form.controls.bytes1"
                [disabled]="editorService.form.controls.bytes1.disabled"
                [config]="{ options: CREATURE_ADDON_BYTES_1, name: 'bytes1' }"
                [modalClass]="'modal-xl'"
              />
              <input [formControlName]="'bytes1'" id="bytes1" type="number" class="form-control form-control-sm" />
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
              <label class="control-label" for="bytes2">bytes2</label>
              <keira-single-value-selector-btn
                [control]="editorService.form.controls.bytes2"
                [disabled]="editorService.form.controls.bytes2.disabled"
                [config]="{ options: CREATURE_ADDON_BYTES_2, name: 'bytes2' }"
                [modalClass]="'modal-lg'"
              />
              <input [formControlName]="'bytes2'" id="bytes2" type="number" class="form-control form-control-sm" />
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
              <label class="control-label" for="emote">emote</label>
              <keira-single-value-selector-btn
                [control]="editorService.form.controls.emote"
                [disabled]="editorService.form.controls.emote.disabled"
                [config]="{ options: EMOTE, name: 'emote' }"
                [modalClass]="'modal-md'"
              />
              <input [formControlName]="'emote'" id="emote" type="number" class="form-control form-control-sm" />
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
              <label class="control-label" for="visibilityDistanceType">visibilityDistanceType</label>
              <i
                class="fas fa-info-circle ms-1"
                placement="auto"
                [tooltip]="'CREATURE.TEMPLATE_ADDON.VISIBILITY_DISTANCE_TYPE' | translate"
              ></i>
              <input
                [formControlName]="'visibilityDistanceType'"
                id="visibilityDistanceType"
                type="number"
                class="form-control form-control-sm"
              />
            </div>
            <div class="form-group col-12 col-sm-12 col-md-8 col-lg-6 col-xl-4">
              <label class="control-label" for="auras">auras</label>
              <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'CREATURE.TEMPLATE_ADDON.AURAS' | translate"></i>
              <input [formControlName]="'auras'" id="auras" class="form-control form-control-sm" />
            </div>
          </div>
        </div>
      </form>
    </div>
  }
</div>
